<template>
	<view class="coupon-list">
		<view class="coupon-tabs">
			<u-tabs @click="clickService" :list="tablist" lineWidth="30" lineColor="#f56c6c" keyName="name"
					:activeStyle="{
			    color: '#303133',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			    color: '#606266',
			    transform: 'scale(1)',
			}" itemStyle="padding:0 40rpx; height: 34px;">
				</u-tabs>
		</view>
		<view class="coupon-container">
			<view v-for="coupon in coupons" :key="coupon.id" class="coupon" :class="coupon.status=='1'||coupon.status=='2'?'disable':''">
				<!-- <view class="coupon-header">
					<view class="coupon-value">{{ coupon.money }}元</view>
					<view class="coupon-title">{{ coupon.name }}</view>
					<view class="coupon-status">{{ coupon.status }}</view>
				</view>
				<view class="coupon-details">
					<view class="coupon-period">{{coupon.start_time}}-{{ coupon.expire_time }}</view>
				</view> -->
				<view class="coupon-left">
					<view class="money" v-if="coupon.type=='FULL'">¥ <text>{{ Number(coupon.money)}}</text></view>
					<view class="money" v-else><text>{{ Number(coupon.discount)}}</text>%</view>
					<view class="min">满{{ coupon.min_money }}可抵用</view>
				</view>
				<view class="coupon-right">
					<view class="title">
						<view class="name">{{coupon.name}}</view>
						<view class="time">{{coupon.start_time}}-{{ coupon.expire_time }}</view>
					</view>
					<view class="coupon-btn">
						<text v-if="coupon.status==0" :class="coupon.statuss!=1?'disable':''" @tap="use(item)">去使用</text>
						<image src="/static/use.png" mode="" v-if="coupon.status==1"></image>
						<image src="/static/expire.png" mode="" v-if="coupon.status==2"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tab: "unused",
				tablist:[{
					id:0,
					name:'未使用'
				},{
					id:1,
					name:'已使用'
				},{
					id:2,
					name:'已过期'
				}],
				coupons: [],
				params:{
					status:0
				}
			};
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.params.page = 1;
			uni.hideNavigationBarLoading();			
			this.getList()
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			if(this.coupons.length<this.total){
				this.getList(true)
				this.page++;
			}
		},
		methods: {
			getList(more){
				this.rq.getData('Market/getMyCoupons',this.params).then(res=>{
					if(more){
						this.coupons = [...this.coupons,...res.data.data]
					}else{
						this.coupons = res.data.data
					}
					this.total = res.data.total
					uni.stopPullDownRefresh()
				}).catch(()=>{
					uni.stopPullDownRefresh()
				})
			},
			clickService(e){
				this.params.status = e.id
				this.params.page = 1
				this.getList()
			},
			use(item){
				uni.navigateTo({
					url:'/subpages/dispatch/dispatch'
				})
			}
		}
	};
</script>
<style scoped lang="scss">	
	.coupon{
		width: 670rpx;
		height: 194rpx;
		background: #fff;
		// border: 2rpx solid #000000;
		display: flex;
		position: relative;
		overflow: hidden;
		
		.coupon-left{			
			display: flex;
			flex-direction: column;
			color: #FF5866;
			width: 184rpx;
			border-right:2rpx dashed rgba(0, 0, 0, 0.66);
			align-items: center;
			justify-content: center;
			.money{
				font-size: 40rpx;
				font-weight: bold;
				text{
					font-size: 72rpx;
					color: #FF5866;
				}
			}
			
			.min{
				font-size: 22rpx;
			}
			&::after{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				border: 2rpx solid #000000;
			}
		}
		.coupon-right{
			display: flex;
			padding-left: 28rpx;
			padding-right: 24rpx;
			flex: 1;
			align-items: center;
			.title{
				.name{
					font-size: 30rpx;
					color: #212121;
					font-weight: bold;
				}
				.time{
					font-size: 24rpx;
					color: #666666;
					margin-top: 30rpx;
				}
			}
			.coupon-btn{
				z-index: 99;
				margin-left: auto;
				text{
					display: flex;
					width: 106rpx;
					height: 48rpx;
					font-size: 24rpx;
					border-radius: 50rpx;
					background: linear-gradient(180deg, #FFB1A1 3%, #FF7794 100%);
					color: #fff;
					align-items: center;
					justify-content: center;
					
					&.disable{
						background: #C8C8C8;
					}
				}
				
				image{
					width: 122rpx;
					height: 122rpx;
				}
			}
		}
		 
		&:before{
			content: '';
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			border: 2rpx solid #000000;
			background: #fff;
			left: 169rpx;
			bottom: -18rpx;
			z-index: 2;
		}
		&:after{
			content: '';
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			border: 2rpx solid #000000;
			background: #fff;
			left: 169rpx;
			top: -18rpx;
			z-index: 2;
		}
	}
	.disable{
		.coupon-left{
			color: #666666;
			.money{
				text{
					color: #666666;
				}
			}
		}
		.coupon-right{
			.title{
				.name{
					color: #999999;
				}
				.time{
					color: #999999;
				}
			}
		}
	}
	.coupon-tabs::v-deep view.data-v-48634e29,.coupon-tabs::v-deep  scroll-view.data-v-48634e29,.coupon-tabs::v-deep  swiper-item.data-v-48634e29{
		flex-grow:1 !important;
	}
	.coupon-list {
		font-family: Arial, sans-serif;
		padding: 20px;
		min-height: 100vh;
		background: #fff;
	}

	.coupon-tabs {
/* 		display: flex;
		justify-content: space-around; */
		margin-bottom: 20px;
	}

	.coupon-tabs button {
		padding: 10px 20px;
		border: none;
		background-color: #f0f0f0;
		cursor: pointer;
	}

	.coupon-tabs button.active {
		background-color: #ff7681;
		color: white;
	}

	.coupon-container {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	
</style>